<template>
  <div class="login">
    <van-nav-bar
        title="登录"
        left-text="返回"
        left-arrow
        fixed
        @click-left="onClickLeft"
    />
    <div class="main">
      <div class="logo">
        <img src="https://themes.taohuren.com/m/static/css/bg/thr_logo.png" alt="">
      </div>
      <div class="form">
        <van-cell-group>
          <van-field v-model="form.account" label="文本" placeholder="请输入用户名" />
        </van-cell-group>
        <van-cell-group>
          <van-field v-model="form.password" type="password" label="密码" />
        </van-cell-group>
      </div>
      <div class="submit">
        <van-button @click="login">登录</van-button>
      </div>
      <div class="register">
        <span><router-link to="/register">免费注册</router-link></span>
        <span>忘记密码</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data(){
    return{
      form:{
        account: 'admin',
        password: 'admin'
      }
    }
  },
  methods:{
    onClickLeft(){
      this.$router.push({
        path: '/home',
        query:{
          tab: 0
        }
      });
    },
    login(){
      this.$store.state.isLogin = true;
      this.$router.push({
        path: '/me',
        query:{
          tab: 4
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.mint-header{
  background-color: #993F26;
}
.main{
  padding-top: 50px;
}
.logo{
  width: 50px;
  height: 50px;
  margin: 0 auto;
  padding: 30px 0;
  img{
    width: 100%;
  }
}
.submit{
  text-align: center;
  padding: 20px 0;
  button{
    background-color: #993F26;
    width: 80%;
    color: white;
    margin: 0 auto;
    border-radius: 2rem;
  }
}

.register{
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  color: #888;
  a{
    color: #888;
  }
}
</style>
